<template>
	<view class="reg_page">
		<view class="top">
			<image class="img" mode="aspectFill" src="/static/images/register.png"></image>
		</view>
		
		<view class="main">
			<view class="item item-input">
				<uni-icons type="contact" size="20"></uni-icons>
				<m-input type="number" clearable v-model="codeparmas.username" placeholder="请输入手机号" :maxLength="11"></m-input>
			</view>
			
			<view class="item item-input">
				<uni-icons type="email" size="20"></uni-icons>
				<m-input type="number" clearable v-model="codeparmas.code" placeholder="请输入验证码" :maxLength="11"></m-input>
				<view class="sendCode">
					<button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
				</view>
			</view>
		</view>
		
		<view class="radioBox">
			<checkbox-group @click="checkboxChange">
				<label class="checkbox" v-for="item in items" :key="item.id">
					<checkbox :value="item.id" :checked="item.checked" />
					<text class="tongyi">我同意《贷投狗用户服务协议及隐私声明》</text>
				</label>
			</checkbox-group>
			
		</view>
		
		<view class="btn_wrap">
			<button class="loginBtn" @click="regiset">提交</button>
		</view>
	</view>
</template>

<script>
	import mInput from '@/components/m-input/m-input.vue'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	export default {
		components: {
			mInput,
		},
		data() {
			return {
				items: [
						{id: '1', value: '我同意《贷投狗用户服务协议及隐私声明》', checked: true},
					  ],
				codeparmas: {
					username: null,
					code: null,
				},
				isChecked: true,
				btnDis: false,
				submitBtnDis: false,
				btnText: "获取验证码",
			}
		},
		methods:{
			checkboxChange(){
				this.isChecked = !this.isChecked
			},
			//发送验证码
			async sendCode() {
				let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				await this.$api.getMsgCode(this.codeparmas.username);
			
				uni.showToast({
					title: '发送成功'
				});
				// 开启倒计时
				this.countDown();
			},
			// 验证码倒计时
			countDown() {
				let t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(t);
				this.btnText = `${timer}s`;
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			//提交
			regiset() {
				if(this.isChecked){
					let checkRes = graceChecker.check(this.codeparmas, formRuleConfig.loginCodeRule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					let postObj = {};
					postObj.phoneNumber = this.codeparmas.username;
					postObj.code = this.codeparmas.code;
					this.$api.register(postObj).then(res => {
						uni.showModal({
							title: '成功提示',
							content: "恭喜你，注册成功",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.reLaunch({
										url: "/pages/public/login"
									})
								}
							}
						});
					}).catch(err => {
						console.log(err)
					})
				}else{
					wx.showToast({
						title: '请勾选，“我同意”',
						icon: 'none',
				    })
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	/* #ifdef APP-PLUS */
	.reg_page {
		height: 100vh;
		background: #F8F8F8;
	}
	/* #endif */
	page{
		background: #F8F8F8;
	}
	.top {
		height: 600rpx;
		background: #3b9df8;
		display: flex;
		align-items: center;
		.img{
			width: 100%;
		}
	}
	.main{
		position: relative;
		width: 90%;
		margin: -60rpx auto 20rpx;
		background: #FFFFFF;
		border-radius: 10px;
		overflow: hidden;
		padding-bottom: 60rpx;
		.item {
			border-bottom: 1px rgba(221, 221, 221, 0.3) solid;
			display: flex;
			padding: 6px 5px 5px 16px;
			align-items: center;
			font-size: 14px;
		}
		
		input {
			font-size: 14px;
		}
	}
	.radioBox{
		width: 90%;
		margin: 0 auto;
		.checkbox{
			display: flex;
			align-items: center;
			font-size: 12px;
		}
	}
	.loginBtn {
		width: 80%;
		margin: 68rpx 10% 0 10%;
		background: #52aaf8;
		border-radius: 25px;
		color: white;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 14px;
	}
</style>
